(function() {
	var support = { animations : Modernizr.cssanimations },
		animEndEventNames = {
			'WebkitAnimation' : 'webkitAnimationEnd',
			'OAnimation' : 'oAnimationEnd',
			'msAnimation' : 'MSAnimationEnd',
			'animation' : 'animationend'
		},
		// animation end event name
		animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ],
		effectSel = document.getElementById( 'fxselect' ),
		component = document.getElementById( 'component' ),
		items = component.querySelector( 'ul.itemwrap' ).children,
		current = 0,
		itemsCount = items.length,
		nav = component.querySelector( 'nav' ),
		addOne=document.querySelector('.addOne');
		navNext = document.querySelector( '.next' );
		//navPrev = nav.querySelector( '.prev' ),
		navDislike=document.querySelector('.whiteround1L');
		isAnimating = false;
	var flag=true;



	function init() {


			navNext.addEventListener( 'click', function( ev ) {

				ev.preventDefault();
				if(flag){
					flag=false;
					addOne.style.animation='addone 1s linear';
					addOne.style.webkitAnimation='addone 1s linear';
					setTimeout(function(){
						navigate( 'next' );
						addOne.style.animation='';
						addOne.style.webkitAnimation='';
						sendID($('.front').attr('index'));
						var front1=$('.front');
						var back1=$('.back');
						front1.removeClass().addClass('back');
						back1.removeClass().addClass('front');
						var dianText=$('.dian-text');
						var dianText2=$('.dian-text2');
						dianText.removeClass().addClass('dian-text2');
						dianText2.removeClass().addClass('dian-text');
						flag=true;
						setTimeout(function(){
							getImg($('.back'),false);
						},300);
					},1000);
				}else{
					return false;
				}

			});


		navDislike.addEventListener( 'click', function( ev ){
			ev.preventDefault();
			navigate( 'next' );
			var front1=$('.front');
			var back1=$('.back');
			front1.removeClass().addClass('back');
			back1.removeClass().addClass('front');
			var dianText=$('.dian-text');
			var dianText2=$('.dian-text2');
			dianText.removeClass().addClass('dian-text2');
			dianText2.removeClass().addClass('dian-text');
			setTimeout(function(){
				getImg($('.back'),false);
			},300);
		});
	}

	function navigate( dir ) {
		isAnimating = true;
		var cntAnims = 0;


		var currentItem = items[ current ];

		if( dir === 'next' ) {
			current = current < itemsCount - 1 ? current + 1 : 0;
		}
		else if( dir === 'prev' ) {
			current = current > 0 ? current - 1 : itemsCount - 1;
		}

		var nextItem = items[ current ];

		var onEndAnimationCurrentItem = function() {
			this.removeEventListener( animEndEventName, onEndAnimationCurrentItem );
			classie.removeClass( this, 'current' );
			classie.removeClass( this, dir === 'next' ? 'navOutNext' : 'navOutPrev' );
			++cntAnims;
			if( cntAnims === 2 ) {
				isAnimating = false;
			}
		}

		var onEndAnimationNextItem = function() {
			this.removeEventListener( animEndEventName, onEndAnimationNextItem );
			classie.addClass( this, 'current' );
			classie.removeClass( this, dir === 'next' ? 'navInNext' : 'navInPrev' );
			++cntAnims;
			if( cntAnims === 2 ) {
				isAnimating = false;
			}
		}

		if( support.animations ) {
			currentItem.addEventListener( animEndEventName, onEndAnimationCurrentItem );
			nextItem.addEventListener( animEndEventName, onEndAnimationNextItem );
		}
		else {
			onEndAnimationCurrentItem();
			onEndAnimationNextItem();
		}

		classie.addClass( currentItem, dir === 'next' ? 'navOutNext' : 'navOutPrev' );
		classie.addClass( nextItem, dir === 'next' ? 'navInNext' : 'navInPrev' );
	}

	init();
})();